<p class="title" *ngIf="tagData.data.title">{{tagData.data.title}}</p>

<section class="service-bg" [ngStyle]="tagData.cssStyle | styleFilter">
  <!-- 之前的样式无选项 -->
  <div class="service-content-bg 1"
    *ngIf="tagData.data.data && tagData.data.data.length > 0 && (!tagData.data.serviceTime || !tagData.data.serviceTime.timeItem || tagData.data.serviceTime.timeItem.length === 0)">
    <p class="service-content" *ngFor="let item of tagData.data.contentList"><img class="icon"
        src="../assets/icon/vip_icon_selected_lj_new.png" alt="">{{item}}</p>
    <p class="service-price"><span class="label">￥</span>{{tagData.data.price}}</p>
  </div>
  <!-- 新样式带选项 1.7.1 蜂喔赚钱宝新增样式处理 -->
  <div class="service-content-bg 2" *ngIf="tagData.data.serviceTime && tagData.data.serviceTime.timeItem.length > 0 && tagData.data.serviceTime.type === undefined"
    [ngStyle]="tagData.data.serviceTime.timeItem[0]&&tagData.data.serviceTime.timeItem[0].contentBoxCssStyle|styleFilter">
    <p class="service-type" *ngIf="tagData.data.showServiceType && tagData.data.showServiceType.length > 0">
      {{tagData.data.showServiceType}}</p>
    <p class="service-content" *ngFor="let item of tagData.data.contentList"><img class="icon"
        src="../assets/icon/vip_icon_selected_lj_new.png" alt="">{{item}}
    </p>

    <!-- 只有一个选项时候 -->
    <ng-container
      *ngIf="tagData.data.serviceTime && tagData.data.serviceTime.timeItem.length == 1 &&  tagData.data.serviceTime.optional !== 'true'">
      <p class="service-time-one"><span class="time-label">{{tagData.data.serviceTime.label}}</span><span
          class="time">{{tagData.data.serviceTime.timeItem[0].content}}</span></p>
      <!-- 人工 -->
      <p *ngIf="tagData.data.artificialService &&  tagData.data.artificialService.optional !== 'true'"
        class="service-artificial"><span class="time-label">{{tagData.data.artificialService.label}}</span><span
          class="artificial">{{tagData.data.artificialService.price}}元</span></p>

      <div *ngIf="tagData.data.artificialService &&  tagData.data.artificialService.optional === 'true'">
        <div class="artificial-service-bg">
          <div class="artificial-service-label">
            <img class="vip-icon" src="../assets/fw/vip_icon_selected.png" alt=""><span
              class="label">{{tagData.data.artificialService.label}}</span>
          </div>
          <div class="artificial-service-price">
            <p class="price">
              <span class="label">￥</span>
              {{tagData.data.artificialService.price}}
            </p>

            <ion-toggle checked (ionChange)="artificialService($event)"></ion-toggle>
          </div>
        </div>
        <p class="desc" *ngIf="tagData.data.artificialService.desc">{{tagData.data.artificialService.desc}}</p>
      </div>
      <hr style="height: 0.03rem;
          background: #E8EAED; margin-bottom: 1.25rem;margin-top: 0.37rem;">
      <p class="service-price"><span class="label">￥</span>{{totalPrice}}
        <!-- 试用抵扣提示 -->
        <span *ngIf="tagData.data.serviceTime.timeItem[0].note && tagData.data.serviceTime.timeItem[0].note.length > 0"
          class="service-note"
          [ngStyle]=" tagData.data.serviceTime.timeItem[0].noteCssStyle | styleFilter">{{tagData.data.serviceTime.timeItem[0].note}}</span>
      </p>
      <!-- 原价格 -->
      <p class="service-price-desc"
        *ngIf="tagData.data.serviceTime.timeItem[0].priceDesc && tagData.data.serviceTime.timeItem[0].priceDesc.length > 0"
        [ngStyle]=" tagData.data.serviceTime.timeItem[0].priceDescCssStyle | styleFilter">
        {{tagData.data.serviceTime.timeItem[0].priceDesc}}</p>
    </ng-container>

    <ng-container
      *ngIf="(tagData.data.serviceTime && tagData.data.serviceTime.timeItem.length > 1) || tagData.data.serviceTime.optional === 'true'">


      <p class="service-time-two" *ngIf="tagData.data.serviceTime.label && tagData.data.serviceTime.label.length > 0">
        <span class="time-label">{{tagData.data.serviceTime.label}}</span>
      </p>
      <div class="service-time-two-bg"
        *ngIf="tagData.data.serviceTime.timeItem && tagData.data.serviceTime.timeItem.length > 0  && tagData.data.serviceTime.timeItem[0].content && tagData.data.serviceTime.timeItem[0].content.length > 0">
        <div *ngFor="let item of tagData.data.serviceTime.timeItem" class="service-time"
          [ngClass]="{'checked': item.checked}" appDebounceClick (debounceClick)="serviceTimeClick(item,tagData.data.serviceTime.timeItem)">
          {{item.content}}
        </div>
      </div>

      <!-- 人工 -->
      <p *ngIf="tagData.data.artificialService &&  tagData.data.artificialService.optional !== 'true'"
        class="service-artificial"><span class="time-label">{{tagData.data.artificialService.label}}</span><span
          class="artificial">{{tagData.data.artificialService.price}}元</span></p>

      <div
        *ngIf="tagData.data.artificialService &&  tagData.data.artificialService.optional === 'true' && tagData.data.artificialService.price > 0">
        <div class="artificial-service-bg">
          <div class="artificial-service-label">
            <img class="vip-icon" src="../assets/fw/vip_icon_selected.png" alt=""><span
              class="label">{{tagData.data.artificialService.label}}</span>
          </div>
          <div class="artificial-service-price">
            <p class="price">
              <span class="label">￥</span>
              {{tagData.data.artificialService.price}}
            </p>

            <ion-toggle [(ngModel)]="checkArtificialService" (ionChange)="artificialService($event)"></ion-toggle>
          </div>
        </div>
        <p class="desc" *ngIf="tagData.data.artificialService.desc">{{tagData.data.artificialService.desc}}</p>
      </div>


      <hr style="height: 0.03rem;
          background: #E8EAED; margin-bottom: 1.25rem;margin-top: 1.25rem;">

      <p class="service-price"><span class="label">￥</span>{{totalPrice}}
        <!-- 试用抵扣提示 -->
        <span *ngIf="tagData.data.serviceTime.timeItem[0].note && tagData.data.serviceTime.timeItem[0].note.length > 0"
          class="service-note"
          [ngStyle]=" tagData.data.serviceTime.timeItem[0].noteCssStyle | styleFilter">{{tagData.data.serviceTime.timeItem[0].note}}</span>
      </p>
      <!-- 原价格 -->
      <p class="service-price-desc"
        *ngIf="tagData.data.serviceTime.timeItem[0].priceDesc && tagData.data.serviceTime.timeItem[0].priceDesc.length > 0"
        [ngStyle]=" tagData.data.serviceTime.timeItem[0].priceDescCssStyle | styleFilter">
        {{tagData.data.serviceTime.timeItem[0].priceDesc}}</p>
    </ng-container>




  </div>
  <!-- 弹窗中的样式 -->
  <div *ngIf="tagData.data.serviceTime && tagData.data.serviceTime.type === '1'" >
    
    <p class="service-content" *ngFor="let item of tagData.data.contentList"><img class="icon"
      src="../assets/icon/vip_icon_selected_lj_new.png" alt="">{{item}}
    </p>    
    <hr style="height: 0.03rem;
          background: #EDEDED; margin-bottom: 1rem;margin-top: 0.37rem;">
      <div class="service-time-type1-bg">
        <div *ngFor="let item of tagData.data.serviceTime.timeItem" class="service-time-type1"
        [ngClass]="{'checked': item.checked}" appDebounceClick (debounceClick)="serviceTimeClick(item,tagData.data.serviceTime.timeItem)">
          <p class="type1-price"> <span class="type1-unit">￥</span>{{item.price}}</p>
          <p class="type1-content">{{item.content}}</p>
        </div>  
      </div>
      
      
  </div>

  <div class="service-desc-bg" *ngIf="tagData.data?.serviceDesc?.title">
    <p class="service-desc-title">{{tagData.data.serviceDesc.title}}</p>
    <p class="service-desc" [innerHTML]="tagData.data.serviceDesc.desc | parseStyle"></p>
  </div>
</section>